<template>
<div>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
      <h3>资源管理</h3>
    <el-form :inline="true" :model="selDataForm" class="demo-form-inline" size="small">
  <el-form-item label="资源名称">
    <el-input v-model="selDataForm.name" placeholder="资源名称"></el-input>
  </el-form-item>
  <el-form-item label="资源路径">
    <el-input v-model="selDataForm.url" placeholder="资源路径"></el-input>
  </el-form-item>
  <el-form-item label="资源分类">
    <el-select v-model="selDataForm.categoryId" placeholder="请选择" clearable>
      <el-option :label="item.name" :value="item.id" v-for="(item,index) in categoryList" :key="index"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button  type="primary" size="small" @click="selTableData">查询</el-button>
    <el-button  type="" size="small" @click="cleanselDataForm">重置</el-button>
  </el-form-item>
</el-form>
  </div>

    <el-button  type="" size="mini" @click="insertDataOpen">添加</el-button>
    <el-button  type="" size="mini" @click="goCategory">资源分类</el-button>
   <el-table
      :data="resourceList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="资源名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="url"
        align="center"
        label="资源路径">
      </el-table-column>
      <el-table-column
        prop="description"
        align="center"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        align="center"
        label="添加时间">
      </el-table-column>
      <el-table-column
      align="center"
        label="操作">
        <template slot-scope="scope">
            <el-link @click="handleEdit(scope.row)">编辑</el-link>
             &nbsp;
             <el-link @click="handleDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
<br />
<el-pagination
  background
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total"
  :page-size="page.size"
  :current-page="page.current"
  @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
</el-pagination>

</el-card>

<el-dialog
  title="添加资源"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div class="dialogDivClass">

  <el-form ref="form" :model="form" label-width="80px" size="small">
  <el-form-item label="资源名称">
    <el-input v-model="insertForm.name"></el-input>
  </el-form-item>
  <el-form-item label="资源路径">
    <el-input v-model="insertForm.url"></el-input>
  </el-form-item>
  <el-form-item label="资源分类">
    <el-select v-model="insertForm.categoryId" placeholder="请选择活动区域">

    </el-select>
  </el-form-item>
  <el-form-item label="描述">
    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 100 }" v-model="insertForm.description"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="insertData" size="small">确定</el-button>
  </el-form-item>
</el-form>
 </div>
</el-dialog>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getResourceList, getCategoryAll, saveOrUpdateResource, deleteResource } from '@/service/resource'
export default Vue.extend({
  data () {
    return {

      dialogVisible: false,
      selDataForm: {
        current: 0,
        size: 0
      },
      insertForm: {

      },
      categoryList: [],
      resourceList: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    async selTableData (flag:boolean) {
      if (flag) {
        this.page.current = 1
      }
      const selData = { ...this.selDataForm }
      selData.current = this.page.current
      selData.size = this.page.size
      const { data } = await getResourceList(selData)
      if (data.code === '000000') {
        this.resourceList = data.data.records
        this.page.total = data.data.total
      }
    },
    async onSubmit () {
      const { data } = await getResourceList(this.selDataForm)
      console.log(data)
    },
    handleEdit (row:any) {
      this.insertForm = row
      this.dialogVisible = true
    },
    async handleDelete (row:any) {
      this.$confirm('确认删除？')
        .then(async () => {
          const { data } = await deleteResource(row.id)
          if (data.code === '000000') {
            this.$message.success(data.mesg)
          } else {
            this.$message.error(data.mesg)
          }
          this.selTableData(true)
        })
    },
    async loadGetCategory () {
      const { data } = await getCategoryAll()
      if (data.code === '000000') {
        this.categoryList = data.data
      }
    },
    handleSizeChange (val:number) {
      this.page.size = val
      this.selTableData(true)
    },
    handleCurrentChange (val:number) {
      this.page.current = val
      this.selTableData(false)
    },
    cleanselDataForm () {
      this.selDataForm = {
        current: 0,
        size: 0
      }
    },
    goCategory () {
      this.$router.push({ name: 'resourceCategory' })
    },
    handleClose (done:any) {
      this.$confirm('确认关闭？')
        .then(() => {
          this.insertForm = {}
          done()
        })
    },
    async insertData () {
      const { data } = await saveOrUpdateResource(this.insertForm)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.selTableData(true)
      } else {
        this.$message.success(data.mesg)
      }
      this.dialogVisible = false
    },
    insertDataOpen () {
      this.insertForm = {}
      this.dialogVisible = true
    }

  },
  created () {
    this.loadGetCategory()
  }
})

</script>

<style lang="scss" scoped>
  .dialogDivClass{
    width:50%;
    min-width:300px;
    margin:0 auto;
  }
</style>
